<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'RecordTable.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
  </head>
  
  <body>
  	<div style="background: #009688; position: fixed; height: 50px; width: 100%; z-index: 2; top: 0px; color: #fff;">
  	<div style="margin: 9px 0 0 10px;">
  		<button class="layui-btn layui-btn-sm layui-btn-primary" onclick="toExcel()">导出此表为EXCEL</button>
  		<span style="margin-left: 10px;">如果打开下载的Excel文件弹出格式不符等提示，请点是</span>
  		<span style="position: absolute;right: 13px;top: 13px;">
  			<i class="layui-icon layui-icon-rate-solid" style="color: #fff;"></i>：准时签到
  			<i class="layui-icon layui-icon-rate" style="color: #fff; margin-left: 10px;"></i>：迟到、早退
  		</span>
  	</div>
  	</div>
  	
  	<div id="recordView" style="margin-top: 50px;"></div>
	<script src="layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.table2excel.min.js"></script>
    <script>
    layui.use(['table', 'layer', 'laytpl', 'form'], function(){
    
    var table = layui.table;
	var layer = layui.layer;
	var laytpl = layui.laytpl;
	var form = layui.form;
    
    	// 获取值
    $.ajax(
	{
		type:"post",
		url:"visual/getRecordByCid.action",
		dataType:"json",
		success : function(result){
			layer.msg(result.msg);
				
			// 渲染视图层
			var recordView = document.getElementById('recordView'); 
			var recordContent = document.getElementById('recordContent');
			laytpl(recordContent.innerHTML).render(result.bean, function (html) {
				//赋值
				recordView.innerHTML = html;
			});
		}
	});
    
    
    });
    </script>
    <script type="text/html" id="recordContent">
	<table id="tableExcel" class="layui-table"  style="width: {{ d[1].record.length * 82 + 100 }}px;">
		<colgroup>
			<col width="100">
			{{#  layui.each(d[1].record, function(index, item){ }}
			<col width="82">
			{{#  }); }}
		</colgroup>
		<thead>
			<tr>
				<th style="text-align: center;">时间</th>
				{{#  layui.each(d[1].record, function(index, item){ }}
				<th style="text-align: center;">{{ item.sname }}</th>
				{{#  }); }}
			</tr> 
		</thead>
		<tbody>
			{{#  layui.each(d, function(index, item){ }}
				<tr>
					<td>{{ item.date }}</td>
					{{#  layui.each(item.record, function(index, item){ }}
					<td style="text-align: center; {{# if(index%2==0){ }}background: #fcfcfc;{{# } }}">
						{{# if(item.flag==0){ }}
							
						{{# } else if(item.flag==1){ }}
							<i class="layui-icon layui-icon-rate-solid"></i> 签到
						{{# } else if(item.flag==2){ }}
							<i class="layui-icon layui-icon-rate" style="color: red;"></i> <span style="color: red;">迟到</span>
						{{# } else { }}
							<i class="layui-icon layui-icon-rate" style="color: red;"></i> <span style="color: red;">早退</span>
						{{# } }}
					</td>
					{{#  }); }}
				</tr>
			{{#  }); }}
		</tbody>
	</table>
	</script>
	<script type="text/javascript">
	function toExcel(){
		console.log(1)
		$("#tableExcel").table2excel({
			exclude: ".noExl",
			name: "Excel Document Name",
			filename: "课程考勤记录表",
			exclude_img: true,
			exclude_links: true,
			exclude_inputs: true
		});
	}
	</script>
  </body>
</html>
